<template>
  <view class="index">
    <view class="search-bar">
      <view class="tab-input-frame-input">
        <input v-model="searchText" placeholder="搜索合同" @confirm="handleSearch" />
        <view class="icon-wrapper" @click="handleSearch">
          <uni-icons type="search" size="26"></uni-icons>
        </view>
      </view>
    </view>

    <view class="contract-list">
      <view 
        class="contract-item" 
        v-for="(item, index) in filteredList" 
        :key="index"
        @click="goTemplatePreview(index)"
      >
        <view class="contract-header">
			 <view class="contract-info">
          <img class="contract-icon" :src="item.img" alt="合同图标" />
		  <view class="content-column">
			  <text class="contract-name">{{ item.name }}</text>
			  <text class="contract-time">创建于{{ item.time }}</text>
		  </view>
            
          </view>
		  <view class="contract-footer">
		    <img class="arrow-icon" :src="item.right" alt="箭头图标" />
		  </view>
        </view>
       
      </view>
      
      <!-- 无搜索结果提示 -->
      <view v-if="searchText && filteredList.length === 0" class="no-result">
        <text>未找到相关合同</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

const searchText = ref('')
const originalList = ref([
  {
    img: "../../static/template-img.png",
    name: "红薯山药平台供应链入驻合同",
    time: "2025/06/09 18:59",
    right: "../../static/right.png"
  },
  {
    img: "../../static/template-img.png",
    name: "房屋租赁合同模板",
    time: "2025/06/08 15:30",
    right: "../../static/right.png"
  },
  {
    img: "../../static/template-img.png",
    name: "劳动合同标准模板",
    time: "2025/06/07 10:20",
    right: "../../static/right.png"
  },
  {
    img: "../../static/template-img.png",
    name: "购销合同模板",
    time: "2025/06/06 14:15",
    right: "../../static/right.png"
  },
  {
    img: "../../static/template-img.png",
    name: "服务合同模板",
    time: "2025/06/05 09:45",
    right: "../../static/right.png"
  },
  {
    img: "../../static/template-img.png",
    name: "技术开发合同",
    time: "2025/06/04 16:30",
    right: "../../static/right.png"
  },
  {
    img: "../../static/template-img.png",
    name: "投资合作协议",
    time: "2025/06/03 11:20",
    right: "../../static/right.png"
  },
  {
    img: "../../static/template-img.png",
    name: "保密协议模板",
    time: "2025/06/02 13:40",
    right: "../../static/right.png"
  }
])

// 计算过滤后的列表
const filteredList = computed(() => {
  if (!searchText.value.trim()) {
    return originalList.value
  }
  
  const searchLower = searchText.value.toLowerCase()
  return originalList.value.filter(item => 
    item.name.toLowerCase().includes(searchLower) ||
    item.time.includes(searchText.value)
  )
})

// 处理搜索
function handleSearch() {
  if (!searchText.value.trim()) {
    uni.showToast({
      title: '请输入搜索内容',
      icon: 'none'
    })
    return
  }
  
  // 显示搜索成功提示
  uni.showToast({
    title: `找到 ${filteredList.value.length} 个相关合同`,
    icon: 'success'
  })
  
  console.log('搜索内容:', searchText.value)
  console.log('搜索结果:', filteredList.value)
}

function goTemplatePreview(index) {
  // 获取原始列表中的索引
  const originalIndex = originalList.value.findIndex(item => 
    item.name === filteredList.value[index].name
  )
  
  uni.navigateTo({
    url: `/pages/template/index?id=${originalIndex}`
  })
}

onMounted(() => {
  console.log('页面加载完成')
})
</script>

<style scoped>
.index {
  background-color: #F9F9F9;
  min-height: calc(100vh - 100rpx);
  padding-bottom: 100rpx;
}

.search-bar {
  background-color: #fff; 
}

.tab-input-frame-input {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
}
.tab-input-frame-input input {
  flex: 1; 
  font-size: 35rpx;
}
.tab-input-frame-input .icon-wrapper {
  margin-left: 15rpx;
}

.contract-list {
  padding: 20rpx;
}
.content-column{
	display: flex;
	flex-direction: column;
}
.contract-item {
  background-color: #fff;
  border-radius: 16rpx;
  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
  margin-bottom: 20rpx;
  padding: 20rpx;
  display: flex;
  flex-direction: column; 
}

.contract-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10rpx; 
}
.contract-icon {
  width: 80rpx; 
  height: 80rpx;
  margin-right: 20rpx;
}
.contract-info {
  display: flex;
}
.contract-name {
  font-size: 36rpx; 
  font-weight: bold;
  margin-bottom: 5rpx; 
}
.contract-time {
  font-size: 28rpx; 
  color: #767676;
}

.arrow-icon {
  width: 30rpx; 
  height: 30rpx;
}

.no-result {
  text-align: center;
  padding: 100rpx 0;
  color: #999;
  font-size: 28rpx;
}

.icon-wrapper {
  cursor: pointer;
  padding: 10rpx;
}
</style>